<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul id="list" class="box">
        <li>评论内容—---<button class="del">删除</button></li>
        <li>评论内容—---<button class="del">删除</button></li>
        <li>评论内容—---<button class="del">删除</button></li>
    </ul>

    <div>hello</div> <p></p>  

    <input value='123' type="text" id='mgs'>
    <button id="publish" class='send'>发布</button>
    <a href="demo1.html"> to new </a>
    <img id="img" src="img/s1.jpg" alt="" width="300px" height="400px">
    <input type="checkbox" id="selectAll"> 全选 
    <button id="fan">反选</button>
    <ul>
        <li><input class="item" type="checkbox"></li>
        <li><input class="item" type="checkbox"></li>
        <li><input class="item" type="checkbox"></li>
        <li><input class="item" type="checkbox"></li>
        <li><input class="item" type="checkbox"></li>
        <li><input class="item" type="checkbox"></li>
        <li><input class="item" type="checkbox"></li>
    </ul>
    <p id="ppp">sssssssssssdddddd</p>
    <script>
        // 七八章主要是学会获取元素，节点操作，属性操作
        // 实现复选框功能
        var all = document.getElementById('selectAll')
        var items = document.getElementsByClassName('item')
        var fan = document.getElementById('fan')

        // 实现点击全选下面选项全部选中
        all.onclick = function(){
            for(var i=0;i<items.length;i++){
                items[i].checked = this.checked
            }
            // console.log(this.checked)  //true
        }
        // 实现点击反选 下面选项与原来选的相反
        fan.onclick = function(){
            for(var i=0;i<items.length;i++){
                items[i].checked =  !items[i].checked
            }
            // 反选实现 但是没有给是否全选赋值 故可以调用函数
            isSelectAll() 
        }

        // 实现 如果每个选项都点上了全选的按钮选中
        for(var i=0;i<items.length;i++){
            items[i].onclick = function(){
                isSelectAll();
            }
        }

        // 全选按钮的实现函数
        function isSelectAll(){
            var isChecked = true;
                for(var i=0;i<items.length;i++){
                    if(!items[i].checked){  //如果有一个没有选即false 则!(false) == true 那么就不是全选
                        isChecked = false;
                        break;
                    }
                }
            all.checked = isChecked;
        }

        
        // //方法二
        // for(var i=0;i<items.length;i++){
        //     items[i].onclick = function(){
        //         var isSelectNum = 0;
        //         for(var i=0;i<items.length;i++){
        //             if(items[i].checked){
        //                 isSelectNum++;
        //             }
        //         }
        //         all.checked = (isSelectNum == ites.length);
        //     }
        // }

        

        // // 实现图片自动切换
        // var img = document.getElementById('img')
        // var num=1
        // setInterval(function(){
        //     num++;
        //     if(num > 4){
        //         num=1;
        //     }
        //     // num>4&&(num=1)
        //     // 先判断 在改变路径
        //     img.src = 'img/s' + num +'.jpg'   
        // },2000)

        var btn = document.getElementById('publish')
        var msg = document.getElementById('mgs')
        var a = document.getElementsByTagName('a')[0];

        // 核心DOM(get..和set..)和 HTML DOM(xx.xxx)操作区别
        btn.onclick = function(){
            msg.value=100;
            console.log(msg.value)
            console.log(msg.getAttribute('value'))
        }

        console.log(a.getAttribute('href'))
        console.log(a.href)

        console.log(btn.getAttribute('id'))
        console.log(btn.id)

        console.log(btn.getAttribute('class'))
        console.log(btn.className)

        var p = document.getElementById('ppp');
        console.log(p.innerHTML)
        
    </script>
</body>
</html>